﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<%@ Register TagPrefix="mm" TagName="HeaderLinks" Src="~/UserControls/HeaderLinks.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MeMa</title>
    <link rel="Shortcut Icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="Stylesheet" href="Styles/Main.css" />
    <style type="text/css">
       
        .header img
        {
        	display: block;
        	margin-bottom: 10px;
        }
        
        .main
        {
        	background-image: url(/images/home-main-background.jpg);
        	background-repeat: no-repeat;
        	height: 100px;
        }
        
        h3
        {
        	width: 100%;
        	padding: 0px;
        	margin: 0px;
        }
        
        .scroller
        {
        	float: right;
        	width: 445px;
        }
        
        .scrollItem
        {
        	float: left;
        	margin-right: 50px;
        	margin-top: 25px;
        	width: 115px;
        }
        
        .profilePic
        {
        	display: block;
        	border-style: none;
        	margin-bottom: 10px;
        }
        
        .listItem img
        {
        	float: left;
        	display: block;
        	margin-right: 10px;
        }
        
        .listItem div
        {
        	float: left;
        	display: block;
        	line-height: 30px;
        	font-size: 16pt;
        	width: 280px;
        }
        
        .listItem
        {
        	clear: both;
        	margin-left: 20px;
        	margin-top: 20px;
        }
        
        div.onTheLeft
        {
        	line-height: 22pt;
        	font-size: 16pt;
        }
        
        div.onTheRight, div.onTheLeft
        {
        }
        
        .actionButton
        {
        	display: block;
        	float: left;
        	margin-right: 40px;
        }
        
        .copyright
        {
        	margin-top: 60px;
        	text-align: center;
        	float: right;
        	width: 99%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="home">
            <div class="header">
                <mm:HeaderLinks id="links" runat="server" IsLogoVisible="false" />
                <div class="onTheLeft" style="width: 400px; margin-top: 20px;">
                    <img src="images/logo.gif" width="300px" />

                    <div class="listItem">
                        <img src="/images/icons/students.png" />
                        <div>Students</div>
                    </div>
                    <div class="listItem">
                        <img src="/images/icons/Teachers.png" />
                        <div>Teachers</div>
                    </div>
                    <div class="listItem">
                        <img src="/images/icons/Professionals.png" />
                        <div>Professionals</div>
                    </div>
                    <div class="listItem">
                        <img src="/images/icons/connect.png" />
                        <div>Connecting to Support Professional Development</div>
                    </div>
                    <div class="clear"></div>

                    <div style="padding-top: 30px; padding-left: 70px;">
                        <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="actionButton" />
                        <asp:Button ID="btnSignup" runat="server" Text="Sign Up" CssClass="actionButton" />
                    </div>
                </div>
                <div class="onTheRight" style="margin-top: 20px;">

                    <h3>Mentors with Recent Activity</h3>

                    <div id="scroller" class="scroller">
                        <div class="scrollItem">
                            <a href="Profile/8128"><img src="images/profile1.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                        <div class="scrollItem">
                            <a href="Profile/8128"><img src="images/profile2.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                        <div class="scrollItem" style="margin-right: 0px;">
                            <a href="Profile/8128"><img src="images/profile3.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                    </div>
                    <div class="clear"></div>

                    <div id="scroller" class="scroller">
                        <div class="scrollItem">
                            <a href="Profile/8128"><img src="images/profile4.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                        <div class="scrollItem">
                            <a href="Profile/8128"><img src="images/profile5.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                        <div class="scrollItem" style="margin-right: 0px;">
                            <a href="Profile/8128"><img src="images/blank-profile.jpg" class="profilePic" />
                            Mentor Name</a><br />
                            That One Company
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="main">
                <div class="copyright">
                    &copy; 2012 Mentor-Match, LLC
                </div>
            </div>
        </div>
    </form>
</body>
</html>
